import React, { useState, memo } from 'react'
import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField'
import Dialog from '@mui/material/Dialog'
import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import DialogContentText from '@mui/material/DialogContentText'
import DialogTitle from '@mui/material/DialogTitle'
import { Link } from 'react-router-dom'
import { ForgetWrapper } from './style'

const ForgetDialog = () => {
  const [open, setOpen] = React.useState(false)

  const handleClickOpen = () => {
    setOpen(true)
  }

  const handleClose = () => {
    setOpen(false)
  }

  return (
    <ForgetWrapper>
      <Link className="btns" onClick={handleClickOpen}>
        忘记密码
      </Link>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>找回密码</DialogTitle>
        <DialogContent>
          <DialogContentText>通过邮箱找回密码</DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Email Address"
            type="email"
            fullWidth
            variant="standard"
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button onClick={handleClose}>Subscribe</Button>
        </DialogActions>
      </Dialog>
    </ForgetWrapper>
  )
}
export default ForgetDialog
